<template>
  <div class="dashboard-container">
    <p class="title">系统设置</p>
    <el-form
      label-width="200px"
      ref="settingForm"
      :model="settingForm"
      :rules="rules"
    >
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
        <el-col
          :xs="4"
          :sm="6"
          :md="8"
          :lg="9"
          :xl="11"
          style="margin-left: 50px"
        >
          <el-form-item label="PDM库名称">
            <el-input
              v-model="settingForm.PDMVaultName"
              placeholder="库名称"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="PDM用户名">
            <el-input
              v-model="settingForm.PDMbsUserName"
              placeholder="用于登录PDM"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="PDM密码">
            <el-input
              type="password"
              v-model="settingForm.PDMbsPasswd"
              placeholder="输入密码"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="PDM数据库地址">
            <el-input
              v-model="settingForm.PDMDatabaseIP"
              placeholder="数据库地址 如192.168.1.1"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="数据库用户名">
            <el-input
              v-model="settingForm.PDMUserName"
              placeholder="用于登录PDM数据库"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="数据库密码">
            <el-input
              type="password"
              v-model="settingForm.PDMPasswd"
              placeholder="输入密码"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="PDM图纸发布区">
            <el-input
              v-model="settingForm.DrawingPublishingArea"
              placeholder="示例：\02数据\转图中心"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="外部指定文件目录">
            <el-input
              v-model="settingForm.ShareFolder"
              placeholder="示例：\\192.168.0.1\sharedata"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input
              v-model="settingForm.loginname"
              placeholder="网络凭据"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input
              v-model="settingForm.loginpass"
              type="password"
              style="width: 45%; margin-right: 20px"
              placeholder="输入你的凭据以连接到目录"
            ></el-input>
            <el-button plain @click="connectTest">连接测试</el-button>
          </el-form-item>
          <div style="margin-top: 30px">
            <el-form-item label="">
              <el-button
                type="primary"
                @click="onSubmit"
                size="small"
                class="el-icon-folder"
              >
                保 存
              </el-button>
              <el-button size="small" class="el-icon-document-delete">
                取 消
              </el-button>
            </el-form-item>
          </div>
        </el-col>
        <el-col
          :xs="4"
          :sm="6"
          :md="8"
          :lg="9"
          :xl="11"
          style="border-left: 1px solid #ccc; padding-left: 60px"
        >
          <el-form-item label="文件名称">
            <el-select
              v-model="settingForm.NamingRule"
              placeholder="请选择"
              multiple
              style="width: 80%"
            >
              <el-option
                v-for="(ele, index) in list"
                :key="index"
                :label="ele.name"
                :value="ele.value"
              ></el-option>
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>

          <el-form-item label="配置名称">
            <el-input
              v-model="settingForm.Remark"
              placeholder="文件名称中选择了配置名称，请在此输入"
              style="width: 80%"
            ></el-input>
          </el-form-item>

          <el-form-item label="发送方式">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="邮箱" :name="activeName"> </el-tab-pane>
              <!-- <el-tab-pane
                v-for="(ele, index) in tabsList"
                :key="index"
                :label="ele.label"
                :name="ele.name"
              >
              </el-tab-pane> -->
            </el-tabs>
          </el-form-item>
          <div v-if="activeName === 'Email'">
            <el-form-item label="接收回复邮箱">
              <el-input
                v-model="settingForm.SendName"
                placeholder=""
                style="width: 80%"
              ></el-input>
            </el-form-item>

            <el-form-item label="发信人">
              <el-input
                v-model="settingForm.SendUser"
                placeholder="防止邮件被屏蔽，请在邮件服务器里将发信邮箱设为白名单"
                style="width: 80%"
              ></el-input>
            </el-form-item>

            <el-form-item label="smtp服务器">
              <el-input
                v-model="settingForm.SendServer"
                placeholder=""
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="smtp端口号">
              <el-input
                v-model.number="settingForm.SendPort"
                placeholder=""
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="smtp账号" prop="SendAccount">
              <el-input
                v-model="settingForm.SendAccount"
                placeholder="防止邮件被屏蔽，请在邮件服务器里将发信邮箱设为白名单"
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="smtp密码" prop="SendPassword">
              <el-input
                type="password"
                v-model="settingForm.SendPassword"
                placeholder=""
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="settingForm.CustomProperty1"
                placeholder="接受邮箱用于测试"
                style="width: 45%; margin-right: 20px"
              ></el-input>
              <el-button plain @click="onTest">测试</el-button>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { SettingApi, CheckShareFolderConnect } from "@/api/dashboard";
export default {
  name: "Dashboard",
  data() {
    return {
      settingForm: {
        PDMVaultName: "",
        PDMbsUserName: "",
        PDMbsPasswd: "",
        PDMDatabaseIP: "",
        PDMUserName: "",
        PDMPasswd: "",
        DrawingPublishingArea: "",
        ShareFolder: "",
        Remark: "",
        SendName: "",
        SendUser: "",
        SendServer: "",
        SendPort: "",
        SendAccount: "",
        SendPassword: "",
        SendingMethod: "Email",
        loginname: "",
        NamingRule: "",
        CustomProperty1: "",
        CustomProperty2: "",
        isCopy: true,
        CustomProperty3: "",
        CustomProperty4: "",
        CustomProperty5: "",
        Opuser: "",
        SendRemark: "",
        SendRemark1: "",
        SendRemark2: "",
      },
      list: [
        { name: "源文件名称", value: "CustomDefine1" },
        { name: "源文件扩展名", value: "CustomDefine2" },
        { name: "配置名称", value: "CustomDefine3" },
        { name: "源文件版本", value: "CustomDefine4" },
        { name: "源文件修订版本", value: "CustomDefine5" },
        { name: "源文件工作流程状态", value: "CustomDefine6" },
        { name: "今天的日期", value: "CustomDefine7" },
      ],
      activeName: "Email",
      tabsList: [
        { label: "邮箱", name: "Email" },
        { label: "企业微信", name: "WeCom" },
        { label: "钉钉", name: "DingDing" },
      ],
      rules: {
        SendAccount: [{ required: true, message: "请输入", trigger: "blur" }],
        SendPassword: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {
    // ...mapGetters(["name"]),
  },
  created() {
    this.getRuledNameList();
    this.getSettingS();
  },
  methods: {
    async getSettingS() {
      const res = await SettingApi({
        postpara: {
          posttype: "getSettingS",
        },
      });
      const data = JSON.parse(res.data);
      console.log(JSON.parse(res.data));
      this.settingForm = { ...data.settings, ...data.sendmodel };
      this.settingForm.NamingRule = JSON.parse(this.settingForm.NamingRule);
      // this.settingForm.PDMbsPasswd = JSON.parse(res.data).settings.PDMbsPasswd;
      // this.settingForm.PDMPasswd = JSON.parse(res.data).settings.PDMPasswd;
      // this.settingForm.ShareFolder = JSON.parse(res.data).settings.ShareFolder;
      // this.settingForm.loginname = JSON.parse(res.data).settings.loginname;
      // this.settingForm.loginpass = JSON.parse(res.data).settings.loginpass;
      // this.settingForm = res.data;
    },
    async getRuledNameList() {
      const res = await SettingApi({
        postpara: {
          posttype: "getRuledNameList",
        },
      });
      // console.log(JSON.parse(res.data));
      // console.log(res);
      this.list = JSON.parse(res.data);
    },
    async onSubmit() {
      this.$refs.settingForm.validate(async (isOk) => {
        if (isOk) {
          this.settingForm.ShareFolder =
            '"' + this.settingForm.ShareFolder + '"';
          this.settingForm.NamingRule = JSON.stringify(
            this.settingForm.NamingRule
          );
          const res = await SettingApi({
            postpara: {
              posttype: "saveSettingS",
            },
            ureentity: {
              ...this.settingForm,
              S_ID: 0,
              CommonConvertTimeInterval: 0,
              EmergentConvertTimeInterval: 0,
              MaxFilePerTask: 0,
              SendingMethod: "Email",
            },
          });
          console.log(res);
        }
      });
    },
    onTest() {
      this.$refs.settingForm.validate(async (isOk) => {
        if (isOk) {
          const res = await SettingApi({
            postpara: {
              posttype: "TestSendEmail",
            },
            SendAccount: this.settingForm.SendAccount,
            SendPassword: this.settingForm.SendPassword,
            ReceiveAcount: this.settingForm.CustomProperty1,
            port: this.settingForm.SendPort,
            server: this.settingForm.SendServer,
          });
          console.log(res);
          if (res.data === "0100") {
            this.$message.success("发送成功");
          } else if (res.data === "0001") {
            this.$message.error("发送失败");
          } else if (res.data === "E0001") {
            this.$message.error("接口调用失败");
          } else {
            this.$message.error("发送失败");
          }
        }
      });
    },
    async connectTest() {
      const res = await CheckShareFolderConnect({
        folderpath: this.settingForm.ShareFolder,
        loginname: this.settingForm.loginname,
        loginpass: this.settingForm.loginpass,
      });
      // console.log(res);
      if (res.data === "S0100") {
        this.$message.success("连接成功");
      } else if (res.data === "E0001") {
        this.$message.error("连接失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    background-color: #fff;
    padding: 20px;

    .title {
      font-size: 20px;
    }
  }
}
</style>
